/**
 * MusicDialog module
 */

 var dataProvider = require("../provider/dataProvider");
 var consts = require("../../../util/consts");
 var storage = require("../../../util/storage");
 var SingleUpload = require("../../../util/upload/SingleUpload");
 var React = require("react");
 var MusicDialog = React.createClass({
    getInitialState: function (){
        return {
            fileUploaded: false
        }
    },
    getInitialProps: function (){
        return {
            root: {},
            isEdit: false
        }
    },
    updateUploaded: function (uploaded){
        this.setState({ fileUploaded: uploaded });
    },
    componentDidMount: function (){
        this.elements = {};
        this.elements.dialog = $(this.refs.dialog);
        this.elements.dialog.css({
            "marginTop": "-" + this.elements.dialog.height() * 0.5 + "px",
            "marginLeft": "-" + this.elements.dialog.width() * 0.5 + "px"
        });
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    handleOnSubmit: function (){
        var root = this.props.root;
        var type = consts.WIDGET_TYPE.MUSIC;
        var is_edit_music = storage.data.is_edit_music;
        var data = this.refs.singleUpload.getBuildWidget();

        root.closeDialog();
        if (is_edit_music){
            var widget = dataProvider.getSpecifyWidgetById(storage.data.selectedWidgetId);
            // 防止覆盖颜色
            widget.color && (delete data.color);
            widget = $.extend({}, widget, data);
            widget.url = widget.action.url;

            root.updateSelectedWidget(widget);
            root.setState({
                selectedWidget: widget
            });
        } else {
            root.addWidgetToPage(data);
        }
    },
    updateUploadAnimation: function (params){
        var root = this.props.root;
        root.updateModel(params);
        this.updateUploaded(false);
    },
    render: function (){
        var root = this.props.root;
        var type = consts.WIDGET_TYPE.MUSIC;

        var rStyle = {
            top: "40%",
            left: "50%",
            width: "670px",
            height: "auto",
            display: "block",
            borderRadius:'5px',
            overflow:'hidden'
        };

        var defaultSettings = {
            upload_url: storage.data.CONST.upload_url,
            md5Field: "music_md5",
            size: 10000000,
            accept: "audio/mp3,audio/wav,audio/aiff,audio/mid",
            placeholder: "请填写在线音频地址或者上传mp3格式文件",
            needInfo: true,
            isIos: false,
            isAndroid: false,
            isZip: false,
            isAudio: true,
            isVideo: false,
            upload_info: $._('Upload music , waiting')
        };

        return (
            <dialog id="musicDialog" ref="dialog" style={rStyle} className="btg-modal widget-form" onselectstart="return false">
                <div className="btg-modal-content">
                    <div name="form.name" className="form-horizontal upload_audio upload_change">
                        <div className="widget-form-title">
                            <label>{$._('Upload audio')}</label>
                        </div>
                        <SingleUpload ref="singleUpload" type={type} settings={defaultSettings} root={root} parent={this} />
                        <div className="form-group buttons">
                            <button type="submit" disabled={!this.state.fileUploaded} onClick={this.handleOnSubmit}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = MusicDialog;
